<template>
  <div class="detail">
    <div class="button" v-show="!state.isDetail" @click="handleClick()">
      <img src="@/assets/img/bind.png" alt="">
      <span>{{ compButtonName }}</span>
    </div>
    <div class="content">
      <div class="wrap">
        <section>
          <div class="name">测绘ID：</div>
          <div class="value">{{ mapState.currentId }}</div>
        </section>
        <section>
          <div class="name">测绘面积：</div>
          <div class="value">{{ mapState.area }}亩</div>
        </section>
      </div>
      <div class="wrap" v-if="state.landId || state.isSelectSite">
        <section v-if="state.isSelectSite">
          <div class="name">地块名称：</div>
          <RtSelect position="bottom" @handleSelect="handleSelect" :clear="false" v-model="state.landId">
            <!-- <template #prefix>关联地块</template> -->
            <RtOptionSelect v-for="v in state.siteList" :label="v.landName" :value="v.id" :key="v.id"></RtOptionSelect>
          </RtSelect>
        </section>

        <section v-else>
          <div class="name">地块名称：</div>
          <div class="value">{{ compDetail.landName }}</div>

        </section>

        <section class="area">
          <div class="name">地块面积：</div>
          <div class="value"> {{ compDetail.area }}亩</div>
        </section>
        <section>
          <div class="name">种植户：</div>
          <div class="value">{{ compDetail.tenantName }}</div>
        </section>
        <section>
          <div class="name">产品：</div>
          <div class="value">{{ compDetail.productNames || '--' }}</div>
        </section>
      </div>
      <div class="empty" v-else>
        <img src="@/assets/img/empty.png" alt="">
        <span>暂无数据</span>
      </div>
      <div class="title" v-if="!!state.farmingList && Array.isArray(state.farmingList) && state.farmingList.length">
        <div class="icon"></div>
        <span>农事记录</span>
      </div>
      <div class="bottom" v-if="!!state.farmingList && Array.isArray(state.farmingList) && state.farmingList.length">
        <div class="wrap" v-for="(v, i) in state.farmingList" :key="i">
          <section>
            <div class="name">农事类型：</div>
            <div class="value">{{ v.type }}</div>
          </section>
          <section>
            <div class="name">操作日期：</div>
            <div class="value">{{ v.time }}</div>
          </section>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from "vue";
import { $toast } from '@/components/toast/index'
import { getPolygonById, getSiteList, updateSite, getFamringRecord } from "@/api/map";
import { mapState } from "@/store";
import { reactive } from "vue";
import RtSelect from '@/components/selection/rtSelect.vue'
import RtOptionSelect from '@/components/selection/rtOption.vue'

const props = defineProps({
  /* detail: {
    default() {
      return {
        id: '489694',
        area: '3.5',
        name: 'A',
        itemArea: '2.5',
        farmer: '张三',
        type: '水稻',
        bindId: '111',
        records: [
          {
            type: '施肥',
            time: '2022-07-08'
          },
          {
            type: '施肥',
            time: '2022-07-08'
          },
          {
            type: '施肥',
            time: '2022-07-08'
          },
          {
            type: '施肥',
            time: '2022-07-08'
          },
          {
            type: '施肥',
            time: '2022-07-08'
          },
          {
            type: '施肥',
            time: '2022-07-10'
          },
        ]
      }
    }
  } */
})

const state = reactive({
  landId: '',
  isSelectSite: false,
  siteList: [],
  farmingList: [],
  isDetail: false
})

const compDetail = computed(() => {
  const info = state.siteList.find(v => v.id === state.landId)
  if (info) {
    info.area = (info.area || 0).toFixed(2).substr(0, 10)
  }
  return info || {}
})

const compButtonName = computed(() => {
  return state.isSelectSite ? '保存' : '绑定地块'
})

const getPolygonInfo = async () => {
  const { data } = await getPolygonById(mapState.currentId)
  state.landId = data.landId
}

const setSiteList = async () => {
  try {
    const res = await getSiteList()
    state.siteList = res.data
  } catch (error) {
    console.error(error);
  }
}

const handleSelect = async (target) => {
  try {
    const { data } = await getFamringRecord(target.value)
    state.farmingList = data.map(v => ({
      type: v.farmingName,
      time: v.operateTime
    }))
  } catch (error) {
    console.error(error);
  }
}

const isShowToast = ref(true)

const handleClick = () => {
  if (state.isSelectSite) {
    bingSite();
  } else {
    state.isSelectSite = true;
    setSiteList();
  }
}

const bingSite = async () => {
  try {
    if (!state.landId)
      return await $toast({
        title: '提示',
        text: '请选择地块',
        during: 2000,
        isShowButton: false
      })

    let flag;
    const config = {
      landId: state.landId,
      id: mapState.currentId
    }
    if (parseInt(mapState.area) !== parseInt(compDetail.area)) {
      flag = await $toast({
        title: '绑定提醒',
        text: `当前测绘区域测绘面积为${mapState.area}亩，是否更新至所选地块的面积`,
        leftButtonText: '仅绑定',
        rightButtonText: '绑定并更新',
      })
    }
    if (flag === 'clickRight')
      config.area = mapState.area
    console.log(config);
    await updateSite (config)
    state.isSelectSite = false;
  } catch (error) {

  }
}

onMounted(async () => {
  await getPolygonInfo();
  if (!state.landId) return;
  state.isDetail = true
  setSiteList();
  handleSelect({
    value: state.landId
  })
})

</script>

<style lang="scss" scoped>
.detail {
  position: relative;
}

.content {
  overflow: auto;
  height: 6.87rem;
}

.button {
  display: flex;
  padding: 0.12rem;
  border-radius: 0.16rem;
  background: rgba(59, 96, 230, 0.1);
  position: absolute;
  top: -0.8rem;
  right: 0rem;

  img {
    width: 0.26rem;
    height: 0.26rem;
    margin-right: 0.1rem;
  }

  span {
    font-size: 0.26rem;
    font-family: PingFangSC,
      PingFang SC;
    font-weight: 400;
    color: #3B60E6;
    line-height: 0.36rem;
  }


}

.wrap {
  background: #F1F1F1;
  border-radius: 0.16rem;
  padding: 0.2rem;
  display: flex;
  margin-bottom: 0.12rem;
  flex-wrap: wrap;

  section {
    display: flex;
    width: 50%;
    flex: 0 0 auto;
    margin-bottom: 0.1rem;

    &:nth-last-of-type(1),
    &:nth-last-of-type(2) {
      margin: 0;
    }

    &.area {
      .value {
        display: flex;
        align-items: center;

        span {
          font-size: 0.28rem;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #1E1E1E;

          &:nth-of-type(1) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          &:nth-of-type(2) {
            flex: 0 0 auto
          }
        }
      }
    }

    .name {
      font-size: 0.28rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #7E7E7E;
      line-height: 0.4rem;
    }

    .value {
      font-size: 0.28rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #1E1E1E;
      line-height: 0.4rem;
      width: 1.69rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.title {
  display: flex;
  align-items: center;

  .icon {
    width: 0.04rem;
    height: 0.2rem;
    background: #3B60E6;
    border-radius: 0.02rem;
    margin-right: 0.08rem;
  }

  span {
    font-size: 0.3rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #242424;
    line-height: 0.42rem
  }
}

.empty {
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    width: 2.19rem;
    height: 2.07rem;
  }

  span {
    font-size: 0.28rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #7E7E7E;
    line-height: 0.4rem;
  }
}

.rt-select {
  width: 1.69rem;
  padding-left: 0rem;

  ::v-deep {
    .suffix {
      right: 0;

      img {
        width: 0.22rem;
        height: 0.22rem;
      }
    }

    .value {
      width: 1.2rem;
    }
  }
}
</style>